<route lang="jsonc" type="page">{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "忘记密码验证码",
  },
}</route>

<script lang="ts" setup>
import { updateGenderApi, getUserInfoApi } from '@/api'
import { to } from '@/utils'

//  性别序号
const gender = ref(0);

const values = true;

/* 挂载的时候请求个人信息，回显性别 */
onMounted(async () => {
  const _res = await getUserInfoApi();
  gender.value = _res.gender;
})  

/* 更新性别 */
const nextStep = async () => {
  if (!values) {
    return;
  }
  try {
    uni.showLoading({
      title: '更新中...',
    });
    await updateGenderApi(gender.value);
    uni.showToast({
      title: '更新成功',
      icon: 'success',
      duration: 2000,
    });
    /* 跳到/pages/login/chooseBriday */
    to('/pages/login/chooseBriday')
    // uni.navigateBack();
  } catch (error) {
    uni.hideLoading();
  }

}

</script>

<template>
  <div style="padding-top: 208rpx; padding-left: 50rpx; padding-right: 50rpx">
    <div class="color-#000000 text-48rpx fon-500">如实选择性别</div>
    <div class="mt-16rpx color-#999999 text-28rpx">
      我们才能准确计算你的步数和卡路里消耗
    </div>
    <div class="color-#999999 text-28rpx">您所选择的信息我们将严格保密</div>

    <div class="mt-200rpx">
      <div class="px-44rpx pt-30rpx pb-30rpx gender_ch" :class="{ 'is-active': gender === 0 }" style="display: flex"
        @click="gender = 0">
        <div style="display: flex; align-items: center">
          <image src="/static/login/nan.png" class="w-30rpx h-30rpx" mode="scaleToFill" />
          <div class="ml-26rpx text-#000000 text-28rpx">男</div>
        </div>

        <wd-checkbox v-model="values" checked-color="#FF0800" v-if="gender === 0" />
      </div>

      <div class="mt-16rpx px-44rpx pt-30rpx pb-30rpx gender_ch" :class="{ 'is-active': gender === 1 }"
        style="display: flex" @click="gender = 1">
        <div style="display: flex; align-items: center">
          <image src="/static/login/nv.png" class="w-30rpx h-30rpx" mode="scaleToFill" />
          <div class="ml-26rpx text-#000000 text-28rpx">女</div>
        </div>

        <wd-checkbox v-model="values" checked-color="#FF0800" v-if="gender === 1" />
      </div>

      <div class="mt-16rpx px-44rpx pt-30rpx pb-30rpx gender_ch" :class="{ 'is-active': gender === 2 }"
        style="display: flex" @click="gender = 2">
        <div style="display: flex; align-items: center">
          <image src="/static/login/other.png" class="w-30rpx h-30rpx" mode="scaleToFill" />
          <div class="ml-26rpx text-#000000 text-28rpx">其他</div>
        </div>

        <wd-checkbox v-model="values" checked-color="#FF0800" v-if="gender === 2" />
      </div>
    </div>

    <div style="position: fixed; bottom: 72rpx; left: 50rpx;" class="w-650rpx h-102rpx">
      <wd-button block custom-style="height: 102rpx" @click="nextStep">下一步</wd-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.gender_ch {
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.is-active {
  border: 2rpx solid #FF0800;
}
</style>
